<template>
  <div>
    <div>{{ app }}</div>
    <button @click="app += 1">App加1</button>
    <div>app组件中ajax请求的结果:{{ ajax_res }}</div>
    <Father></Father>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view />
  </div>
</template>
<script>
console.log(1);
window.onload = () => {
  console.log(`window.onload执行时机：
  在网络请求完成，数据更新完成，且相应dom也更新完成之后。`);
};
// 结论：window.onload执行时机：
// 在网络请求完成，数据更新完成，且相应dom也更新完成之后。
export default {
  beforeCreate() {
    console.log("beforeCreate", "app");
  },
  created() {
    console.log("created", "app");
  },
};
</script>
<script setup>
import axios from "axios";
import Father from "./components/Father.vue";
console.log("setup", "app");
let ajax_res = ref();
const app = ref("App");
onBeforeMount(() => {
  console.log("onBeforeMount", "app");
});
onMounted(() => {
  console.log("onMounted", "app");
  axios.get("http://39.103.151.139:3000/program/recommend").then((res) => {
    const result = res.data.programs[0].mainSong.name;
    ajax_res.value = result;
    console.log(ajax_res.value, "网络请求结束的时机");
  });
});
onBeforeUpdate(() => {
  console.log("onBeforeUpdate", "app");
  // 此时，数据已更新，相对应的dom还未更新。
});
onUpdated(() => {
  console.log("oneUpdated", "app");
  // 此时，数据已更新，相对应的dom也已更新完成。
});
onBeforeUnmount(() => {
  console.log("onBeforeUnmount", "app");
});
onUnmounted(() => {
  console.log("onUnmounted", "app");
});
</script>

<style lang="scss" scoped></style>
